<script setup lang="ts">
import { Button } from 'ant-design-vue';
import { useMenusStore } from '@/stores/permission';
import { useAuthStore } from '@/stores/auth';

const menuConfig = useMenusStore();
const authStore = useAuthStore();

const LoginOut = () => {
  menuConfig.tabsLogout();
  authStore.userLogout();
};
</script>
<template>
  <div class="error-container layout-padding flex-col justify-center items-center">
    <img class="error-img" src="@/assets/401.svg" />
    <div class="error-wrap">
      <div class="error-title">您没有操作权限，请联系管理员！</div>
      <div class="error-msg">联系方式: 18888888888</div>
      <Button @click="LoginOut" round type="primary"
        >重新登录</Button
      >
    </div>
  </div>
</template>
<style scoped lang="less">
.error-container {
  .error-img {
    width: 350px;
    margin-bottom: 20px;
  }

  .error-wrap {
    margin-left: 50px;
    .error-title {
      font-size: 22px;
      font-weight: 600;
    }
    .error-msg {
      font-size: 13px;
      margin: 10px 0 30px 0;
      color: var(--el-color-info);
    }
  }
}
.layout-padding {
  border: 1px solid var(--mxg-border-color-light);
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
